import React, { ReactElement, useEffect, useState} from 'react'
import { Card, Table, Button, Image, Form, Input} from 'antd';
import { useDispatch, useSelector,useHistory} from 'umi'
import MenuModal from '../../../components/MenuModal.jsx'
export default function index() {
    //内部数据
    const [modalShow,setModalShow]= useState(true)
    const [modalData,setModalData]=useState(null)
    const dispatch = useDispatch()
    const history=useHistory()
    useEffect(() => {
        dispatch({
            type: 'menuModule/menuListInit',
            payload: {
                pageSize: 100,
                currentPage: 1
            }
        })
    }, [])
    const menuList = useSelector((state) => {
        return state.menuModule.menuList
    })
    //打开模态框
    const showModal = (text) => {
        // console.log(text);
        setModalShow(false);
        setModalData(text)
      };
    const columns = [
        {
            title: '菜品名字',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: 250
        },
        {
            title: '菜品图片',
            dataIndex: 'coverpic',
            key: 'coverpic',
            render: text => {
                return <Image src={text} style={{ width: '40px', height: '40px' }}></Image>
            },
            align: 'center',
            width: 200
        },
        {
            title: '浏览量',
            dataIndex: 'pageview',
            key: 'pageview',
            align: 'center',
            width: 200
        },
        {
            title: '收藏数量',
            dataIndex: 'collections',
            key: 'collections',
            align: 'center',
            width: 200
        },
        {
            title: '是否限时免费',
            dataIndex: 'isFree',
            key: 'isFree',
            render: text => {
                return text == 'N' ? "否" : '是'
            },
            align: 'center',
            width: 200
        },
        {
            title: '需要厨师等级',
            dataIndex: 'grade',
            key: 'grade',
            render: text => {
                return text + '级'
            },
            align: 'center',
            width: 200
        },
        {
            title: '操作',
            render: text => (
                <>
                    <Button type="dashed" danger  onClick={()=>showModal(text)}>修改</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button type="default" onClick={()=>goToDetail(text._id)}>详情</Button>
                </>
            ),
            align: 'center'
        }
    ]
    //搜索功能
    const onFinish = (values) => {
        // console.log('Received values from form: ', values);
        dispatch({
            type: 'menuModule/initSearch',
            payload: values
        })
    };
    //让子元素控制模态框
    const setModal=()=>{
        setModalShow(true)
    }
    //点击去详情
    const goToDetail=(id)=>{
        history.push('/home/menu/details/'+id)
    }
    return (
        <Card title="菜谱列表" extra={<a>新增</a>} style={{ width: "98.5%" }}>
            <Form
                name="customized_form_controls"
                layout="inline"
                onFinish={onFinish}
            >
                <Form.Item
                    name="val"
                >
                    <Input placeholder="请输入菜品名字" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        确认
                    </Button>
                </Form.Item>
            </Form>
            <br />
            <Table
                rowKey="_id"
                columns={columns}
                dataSource={menuList}
                bordered
                pagination={{ defaultCurrent: 1, defaultPageSize: 5, showQuickJumper: true }}
            />
            {
                modalShow ?null: <MenuModal modalData={modalData} setModal={setModal}></MenuModal>
            }
        </Card>
    )
}



